<template>
	<view class="list">
		<z-paging
			ref="paging"
			:refresher-out-rate="0.8"
			:auto-clean-list-when-reload="false"
			bg-color="#F5F5F5"
			:refresher-status.sync="refresherStatus"
			empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
			empty-view-text="暂无内容"
			v-model="dataList"
			@query="queryList"
		>
			<view
				slot="top"
				style="background-color: #fff"
			>
				<view class="search">
					<u-search
						placeholder="搜索提交人/会议主题"
						v-model="keyword"
						bgColor="#E1E1E1"
						color="#333"
						placeholderColor="#999999"
						clearabled
						height="64rpx"
						@custom="keywordSearch"
						:actionStyle="actionStyle"
					/>
				</view>
				<u-tabs
					:list="navList"
					@click="changeType"
					:current="current"
					:scrollable="false"
					:inactiveStyle="inactiveStyle"
					:activeStyle="activeStyle"
					lineColor="#588BF3"
				></u-tabs>
			</view>
			<view
				class="item"
				v-for="(item, index) in dataList"
				:key="index"
			>
				<view class="cellBox">
					<view
						slot="title"
						class="celltitle flex_wrap row_middle row_between"
						v-if="current === 2"
					>
						提交人：
						<u--text
							:text="item.submitManName"
							color="#588BF3"
							size="32rpx"
							align="left"
							:lines="1"
						/>
						<u--text
							:text="`${$u.timeFormat(item.endTime, 'yy/mm/dd')}`"
							color="#588BF3"
							size="28rpx"
							align="right"
							:lines="1"
						/>
					</view>
					<u-cell
						:iconStyle="cellIconStyle"
						:titleStyle="cellTitleStyle"
						size="large"
						:arrow="false"
						:border="false"
					>
						<view
							slot="label"
							class="labelBox flex_column"
						>
							<view class="lineWrap"></view>
							<view
								class="flex_column contentWrap"
								@click="toConferenceDetail(item)"
							>
								<view class="bodyTitle flex_wrap row_middle row_between">
									<u--text
										:text="item.theme"
										color="#333"
										size="40rpx"
										bold
										:lines="1"
									/>
									<view
										class="myWrap"
										v-if="String(item.submitManId) === String(userInfo.id)"
									></view>
									<u-icon
										name="arrow-right"
										color="#588BF3"
										size="30rpx"
										bold
									/>
								</view>
								<view class="flex_wrap row_between row_bottom">
									<view class="flex_wrap column_between">
										<u-gap height="20rpx" />
										<u-icon
											name="/static/img/conference/cellIcon.png"
											:label="`${item.province || ''} ${item.city || ''} ${item.county || ''}`"
											space="14rpx"
											width="36rpx"
											height="36rpx"
											labelSize="28rpx"
											labelColor="#868B9F"
											bold
										/>
										<u-gap height="20rpx" />
										<u-icon
											name="/static/img/conference/pepole.png"
											:label="`${item.submitManName || ''}`"
											space="14rpx"
											width="36rpx"
											height="36rpx"
											labelSize="28rpx"
											labelColor="#868B9F"
											bold
										/>
									</view>
								</view>
							</view>

							<view class="flex_wrap row_middle bottomWrap">
								<u--text
									:text="`${$u.timeFormat(item.startTime, 'yy/mm/dd hh:MM')}-${$u.timeFormat(item.endTime, 'yy/mm/dd hh:MM')}`"
									@click.self="toConferenceDetail(item)"
									color="#588BF3"
									size="28rpx"
									:lines="1"
								/>
								<block v-if="[0, 1].includes(current) && item.haveSignedUp !== null && String(item.submitManId) !== String(userInfo.id)">
									<u-button
										:customStyle="customButtonStyle"
										color="#588BF3"
										text="报名"
										shape="circle"
										@click.self="signUpHandler(item.id)"
										v-if="!item.haveSignedUp"
									/>
									<u-button
										:customStyle="customButtonStyle2"
										text="取消报名"
										plain
										color="#999"
										shape="circle"
										:hairline="false"
										@click="cancelSignUpHandler(item.id)"
										v-if="item.haveSignedUp && item.meetState === '1'"
									/>
								</block>
								<block v-if="current === 2 && Number(item.checkState) === 0">
									<u-button
										:customStyle="customButtonStyle"
										color="#588BF3"
										text="审核"
										shape="circle"
										@click="toRequestDetail(item.id)"
									/>
								</block>
							</view>
							<!-- 我的会议 -->
							<view
								class="constBgWrap"
								@click.self="toConferenceDetail(item)"
								v-if="[0].includes(current) && String(item.submitManId) === String(userInfo.id) && item.meetState === '1'"
							>
								<u--image
									:src="`/static/img/conference/${constBg[item.checkState]}.png`"
									width="160rpx"
									height="160rpx"
									shape="circle"
								/>
							</view>
							<!-- 审核会议 状态 -->
							<view
								class="constBgWrap"
								v-if="[2].includes(current)"
								@click.self="toConferenceDetail(item)"
							>
								<u--image
									:src="`/static/img/conference/${constBg[item.checkState]}.png`"
									width="160rpx"
									height="160rpx"
									shape="circle"
								/>
							</view>
							<view
								class="meetStateWrap"
								@click.self="toConferenceDetail(item)"
								v-if="['0', '2'].includes(item.meetState) && [0, 3].includes(current)"
								:style="{
									background: item.meetState === '2' ? '#FF5B5B' : '#76D196'
								}"
							>
								{{ item.meetState === "2" ? "已结束" : "进行中" }}
							</view>
						</view>
					</u-cell>
				</view>
			</view>
			<view slot="bottom">
				<view class="bottom">
					<u-button
						text="发起会议"
						:customStyle="buttonCustomStyle"
						shape="circle"
						@click="toInitiateMeeting"
					/>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import { salesmanInfo } from "@/api/userSalesman.js"

	import { mapGetters } from "vuex"
	import {
		salesManMeetingPage,
		getSignUpIdByMeetId,
		signUp,
		cancelSignUp,
		getMyMeetList,
		getMyCanSignUpMeetList,
		getHistoryMeetList,
		getSelectCSalesManMeet
	} from "@/api/salesmanMeeting"
	export default {
		computed: mapGetters(["userInfo"]),
		options: {
			styleIsolation: "shared" // 解除样式隔离
		},
		data() {
			return {
				actionStyle: {
					fontSize: "28rpx",
					color: "#588BF3"
				},
				buttonCustomStyle: {
					height: "74rpx",
					width: "694rpx",
					backgroundColor: "#588BF3",
					fontSize: "#FFF",
					margin: "0 auto",
					color: "#FFF"
				},
				navList: [
					{
						name: "我的会议",
						interface: "1", //1:查订单列表接口 2:查退款订单列表接口
						status: "" //查询条件 空字符串为查询全部 1:查待付款 2查待领取 3查已完成 4查退款
					},
					// {
					// 	name: "可报名",
					// 	interface: "1", //1:查订单列表接口 2:查退款订单列表接口
					// 	status: "1" //查询条件 空字符串为查询全部 1:查待付款 2查待领取 3查已完成 4查退款
					// },
					// {
					// 	name: "审核",
					// 	interface: "1", //1:查订单列表接口 2:查退款订单列表接口
					// 	status: "2" //查询条件 空字符串为查询全部 1:查待付款 2查待领取 3查已完成 4查退款
					// },
					{
						name: "历史",
						interface: "1", //1:查订单列表接口 2:查退款订单列表接口
						status: "3" //查询条件 空字符串为查询全部 1:查待付款 2查待领取 3查已完成 4查退款
					}
				],
				inactiveStyle: {
					fontSize: "32rpx",
					color: " #333333"
				},
				activeStyle: {
					fontSize: "32rpx",
					fontWeight: "bold",
					color: "#588BF3"
				},
				current: 0,
				keyword: "",
				// 0:审核中 1：已通过 2：未通过 3：已撤销
				constBg: {
					0: "meetingStatus1",
					1: "meetingStatus2",
					2: "meetingStatus3",
					3: "meetingStatus4"
				},
				modalTitle: "是否报名此会议？",
				modalContent: "",
				showModal: false,
				dataList: [1, 2, 3, 4, 5],
				refresherStatus: 0,
				showFilter: false,
				signUpId: null,
				cellIconStyle: {
					width: "36rpx",
					height: "36rpx",
					marginRight: "14rpx"
				},
				cellTitleStyle: {
					fontSize: "28rpx",
					color: "#333"
				},
				customButtonStyle: {
					// 报名按钮自定义样式
					width: "158rpx",
					height: "60rpx",
					fontSize: "28rpx",
					margin: "0"
				},
				customButtonStyle2: {
					width: "158rpx",
					height: "60rpx",
					fontSize: "28rpx",
					margin: "0",
					color: "#999",
					background: "#EEF9FF",
					border: "1px solid #999999"
				},
				filterParams: {
					city: "", //市
					county: "", //区
					province: "", // 省
					orderByDate: false, // 日期从最早或最晚开始 （最早为 true 最晚为 false）
					salesManId: "",
					startTimeAfter: "", // 日期结束时间
					startTimeBegin: "", // 日期开始时间
					state: "" // 0:可报名 1：已报名 2:我的会议 3：进行中 4：已结束
				}
			}
		},
		methods: {
			changeType(e) {
				this.keyword = ""
				this.$refs.paging.reload()
				this.current = e.index
			},
			keywordSearch() {
				this.$refs.paging.reload()
			},
			// 跳转会议详情
			toConferenceDetail(item) {
				let url = null
				switch (this.current) {
					case 0:
						// 我的会议  0审核中 2未通过 3已撤销 进入审核详情pages_initiateMeeting/initiateForm/detail页面
						//  1已通过  进去会议详情pages_conferenceDetail/detail/index
						// checkState 0审核中  1已通过 2未通过 3已撤销
						// meetState  0进行中  1未开始 2已结束
						url = ["0", "2", "3"].includes(item.checkState) ? "pages_initiateMeeting/initiateForm/detail" : "pages_conferenceDetail/detail/index"
						break
					case 2:
						//  审核tab current===2  进入审核详情页面（审核别人）
						url = "pages_initiateMeeting/auditMeetingRequest/detail"
						break
					default:
						// this.current 1 3 会议详情
						url = "pages_conferenceDetail/detail/index"
						break
				}
				uni.$u.route({
					url,
					params: {
						meetId: item.id,
						...item
					}
				})
			},
			// 取消报名
			cancelSignUpHandler(meetId) {
				const that = this
				uni.showModal({
					title: "",
					content: "是否取消报名?",
					success({ confirm, cancel }) {
						if (confirm) {
							getSignUpIdByMeetId(meetId).then((res) => {
								that.signUpId = res.data
								cancelSignUp(that.signUpId).then((res) => {
									uni.$u.toast("取消成功！")
									that.$refs.paging.refresh()
								})
							})
						}
					}
				})
			},
			// 报名
			signUpHandler(meetId) {
				if (this.userInfo.dimission !== "0") {
					uni.showToast({
						icon: "none",
						title: "已离职,不可报名"
					})
					return
				} else {
					const that = this
					uni.showModal({
						title: "",
						content: "是否报名此会议?",
						success({ confirm, cancel }) {
							if (confirm) {
								signUp(meetId).then((res) => {
									uni.$u.toast("报名成功")
									that.$refs.paging.refresh()
								})
							}
						}
					})
				}
			},
			//发起会议
			toInitiateMeeting() {
				if (this.userInfo.dimission !== "0") {
					uni.showToast({
						icon: "none",
						title: "已离职,不可发起"
					})
					return
				} else {
					uni.$u.route({
						url: "pages_initiateMeeting/initiateForm/index"
					})
				}
			},
			// 审核会议
			toRequestDetail(id) {
				uni.$u.route({
					url: "pages_initiateMeeting/auditMeetingRequest/detail?meetId=" + id
				})
			},
			async queryList(pageNo, pageSize) {
				const that = this
				const params = {
					pageSize: pageSize,
					pageNum: pageNo,
					parameter: that.keyword
					// ...that.filterParams,
				}
				for (const key in params) {
					if (params[key] === "") {
						delete params[key]
					}
				}
				that.$store.dispatch("USERINFO", { $u: uni.$u }).then(async () => {
					// that.$refs.filter.resetAreas();
					let result
					switch (that.current) {
						case 0:
							result = await getMyMeetList(params)
							break
						case 1:
							result = await getMyCanSignUpMeetList(params)
							break
						case 2:
							result = await getSelectCSalesManMeet(params)
							break
						case 3:
							result = await getHistoryMeetList(params)
							break
						default:
							result = await getMyMeetList(params)
					}
					that.$refs.paging.completeByTotal(result.data.rows, result.total)
					// getMyMeetList(params)
					//     .then((result) => {
					//         that.$refs.paging.completeByTotal(
					//             result.data.rows,
					//             result.total
					//         );
					//     })
					//     .catch((e) => {
					//         that.$refs.paging.complete(false);
					//     });
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		padding: 32rpx 28rpx;
		background-color: #fff;
	}
	.item {
		padding: 50rpx;
		padding: 40rpx 28rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-bottom: 14rpx;
	}

	.bottom {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
	}

	.topNav {
		padding: 40rpx 40rpx 20rpx 40rpx;
		background-color: #fff;
	}

	.filterBox {
		margin-top: 14rpx;
		background-color: #fff;
	}

	.cellBox {
		background: #f6f7fb;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
	::v-deep .u-cell__body {
		padding: 0 !important;
	}

	.celltitle {
		width: 100%;
		height: 80upx;
		border-bottom: 1px solid #f3f3f3;
		padding: 0 38rpx;
		font-size: 32rpx;
		color: #333;
	}
	.labelBox {
		width: 100%;
		height: auto;
		padding: 20rpx 20upx;
		position: relative;
	}
	.constBgWrap {
		position: absolute;
		right: 50rpx;
		bottom: 100rpx;
	}
	.meetStateWrap {
		position: absolute;
		right: 0;
		bottom: 112rpx;
		line-height: 62rpx;
		text-align: center;
		width: 144rpx;
		height: 62rpx;
		background: #76d196;
		border-radius: 80rpx 0rpx 0rpx 80rpx;
		color: #fff;
		font-size: 28rpx;
	}
	.bottomWrap {
		height: 86rpx;
		background: #eef9ff;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 30rpx;
	}
	.contentWrap {
		padding-left: 46rpx;
		box-sizing: border-box;
	}
	.myWrap {
		width: 124rpx;
		height: 40rpx;
		background-image: url("@/static/img/conference/mgBg.png");
		margin-right: 18rpx;
		background-size: cover;
	}
	.lineWrap {
		position: absolute;
		height: 132rpx;
		width: 0rpx;
		opacity: 0.3;
		bottom: 146rpx;
		left: 15px;
		border: 1rpx solid #d8d8d8;
	}
	.statusImage {
		width: 100upx;
		height: 100upx;
	}
</style>
